import React, {FC, forwardRef, ReactNode, Suspense, useState} from "react";
import  discoverMenus  from "@/assets/data/discover-menus.json"
import {Outlet, Link as RouterLink, LinkProps, useNavigate} from "react-router-dom";
import {Button, chakra, HStack} from "@chakra-ui/react";
import TextTag from "@/components/TextTag";

interface IProps {
    children?:ReactNode
}
const Discover :FC<IProps> = () =>{
    const navigate = useNavigate()
    const [activeIndex,setActiveIndex] = useState(0)
    return (
        <div>
            <HStack mt={4}  ml={200}  >
                {discoverMenus.map((item,index)=>{
                    return (
                        <TextTag   
                            isActive={activeIndex === index}
                            onClick={()=>{
                                setActiveIndex(index)
                                navigate(item.link)
                            }}
                            key={item.title}
                        >{item.title}</TextTag>
                    )
                })}
            </HStack>
            <Suspense fallback="">
                <Outlet />
            </Suspense>
        </div>
    )
}

export default Discover